<template>
  <div class="home-main" style="margin-top: 30px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      size="default"
      label-width="100px"
      label-position="top"
    >
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="发件人名称" prop="fromName">
            <el-input
              v-model="formData.fromName"
              type="text"
              placeholder="请输入发件人名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发件人邮箱" prop="smtpUsername">
            <el-input
              v-model="formData.smtpUsername"
              type="text"
              placeholder="请输入发件人邮箱"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="授权码" prop="smtpPassword">
            <el-input
              v-model="formData.smtpPassword"
              type="text"
              placeholder="请输入授权码"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="服务器地址" prop="smtpHost">
            <el-input
              v-model="formData.smtpHost"
              type="text"
              placeholder="请输入服务器地址"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="服务器端口" prop="smtpPort">
            <el-input
              v-model="formData.smtpPort"
              type="text"
              placeholder="请输入服务器端口"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="submitForm">保 存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
import { getEmail, updateEmail } from "@/api/system/email";
const { proxy } = getCurrentInstance();
const formRef = ref();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
const data = reactive({
  formData: {
    fromName: undefined,
    smtpUsername: undefined,
    smtpHost: undefined,
    smtpPassword: undefined,
    smtpPort: undefined,
  },
  rules: {
    nickName: [
      {
        required: true,
        message: "请输入姓名",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单
    updateEmail(formData.value).then((res) => {
      proxy.$modal.msgSuccess("保存成功");
    });
  });
}
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields();
}

function getList() {
  getEmail().then((res) => {
    formData.value = res.data;
  });
}
onMounted(() => {
  getList();
});
</script>
<style>
</style>
